<template>
    <div class="total-number-orders-box">
      <visualEchart :option="option"/>
    </div>
  </template>
  <script>
    import visualEchart from '../../vue/visual-echart'
    export default {
      components: { visualEchart },
        props: {
            data: {
                type: [Object, Array],
                default: ()=>({})
            },
        },
      data() {
        return {
            option: {
                color:['#36A8FF','#00F4AE','#FFD547','#36F1FF','#FF7C47','#A947FF','#5647FF','#DF4D42','#F987F7'],
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgb(14 37 79 / 70%);', // 灰色半透明背景
                    borderColor: 'rgba(14, 37, 79, 1)', // 边框颜色
                    textStyle: {
                        color: 'rgba(188, 217, 255, 1)', // 文字颜色
                    },
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    type: 'scroll',
                    // 滚动条箭头颜色设置
                    pageIconColor: '#FFA500',      // 可点击时的箭头颜色（例如橙色）
                    pageIconInactiveColor: '#888', // 不可点击时的箭头颜色（例如灰色）
                    pageTextStyle: {
                        color: '#BCE0FF'           // 页码文字颜色（与图例文字颜色一致）
                    },
                    textStyle: {
                        fontSize: 12,
                        color: '#BCE0FF',
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '55%',
                        center: ["35%", "50%"],
                        data: [],
                        emptyCircleStyle: {
                            color: 'transparent', // 空数据圆透明
                            borderColor: 'transparent', // 边框透明
                            borderWidth: 0, // 边框宽度 0
                        },
                        itemStyle: {
                            normal: {
                                label:{ 
                                    show: true,  
                                    textStyle:{
                                        color:'#fff'
                                    }
                                } 
                            },
                        },
                    }
                ]
            }
        }
      },
      watch: {
            // 深度监听对象
            data: {
                handler(newVal, oldVal) {
                    this.GetData()
                },
                deep: true, // 深度监听
                immediate: true // 立即执行一次
            },
        },
        created() {},
        mounted() {
            this.GetData()
        },
        computed: {},
        methods: {
            // 获取数据信息
            GetData(){
                let mergedArray = []
                if(this.data.title){
                    mergedArray = this.data.title.map((name,index)=>{
                        return {
                            value: parseInt(this.data.values[index]),
                            name: name
                        }
                    })
                }
                this.option.series[0].data = mergedArray
            }
        },
    }
  </script>
  <style scoped lang="scss">
    .total-number-orders-box {
        height: 100%;
        height: 100%;
    }
  </style>
  